<template>
  <div class="app-container">
    <el-drawer :title="title" :visible.sync="openDetail" size="920px" @close="cancel">
      <template v-slot:title>
        <span class="titleDiv">{{ title }}</span>
      </template>
      <!-- :span-method="objectSpanMethod" -->
      <div style="padding: 0 20px">
        <div>
          <el-button type="primary" v-print="printContent">打印</el-button>
        </div>
        <div id="printMe"  style="width:853px">
          <div
            v-for="(item,i) in ticketData"
            :key="i"
            style="page-break-after:always ;width:853px;height:495px"
          >
            <div class="headerPrint">
              <h3 class="H3">销售出库单</h3>
              <div  class="biaoti">
                <p>武汉合智数字能源技术有限公司</p>
                <div>
                  <span>单据编号：</span>
                  <span>{{ form.salseCode }}</span>
                </div>
              </div>
            </div>
            <el-row :gutter="24">
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <span>合同号:</span>
                  <span>{{ }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <span>发货日期:</span>
                  <span>{{ form.salseDate }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="20">
                <div class="grid-content bg-purple">
                  <span>购货单位:</span>
                  <span>{{ }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  <span>地址及联系人:</span>
                  <span>{{ }}</span>
                </div>
              </el-col>
            </el-row>
            <div class="printDiv">
              <el-table
                v-loading="loading"
                :data="item"
                resizable
                border 
                style="width: 100%;border-color:#333"
                fit
                :header-cell-style="{fontSize:'12px',color: '#000',fontWeight: '500',height:'38px',padding:'0px'}"
                :cell-style="{fontSize:'12px',padding:'0px',height:'38px',lineHeight:'20px',color: '#000'}"
                class="exporttable"
                show-summary
                :summary-method="getSummaries"
              >
                <el-table-column label="序号" width="50px" align="center" prop="issueCode">
                  <template slot-scope="scope">
                    <span>{{scope.$index + 1}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="产品编码" width="80px" prop="itemCode" />
                <el-table-column label="旧产品编码" align="center" width="80px" prop="a" />
                <el-table-column label="产品名称" align="center" width="120px" prop="itemName">
                  <template slot-scope="scope">
                    <div style="line-height: 13px;text-align:center;">{{scope.row.itemName}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="规格型号" align="center" width="230px" prop="specification">
                  <template slot-scope="scope">
                    <div style="line-height: 13px;text-align:left;">{{scope.row.specification}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="单位" width="50px" align="center" prop="unitOfMeasure" />
                <el-table-column label="实发数量" width="80px" align="center" prop="quantitySalse" />
                <el-table-column label="仓库" align="center" width="80px" prop="warehouseName" />
                <el-table-column label="备注" align="center" width="81px" prop="remark" />
              </el-table>
            </div>

            <div class="remarkDiv">
              <div class="remarkSpan">备注：收货后请签名回传以便我司提供更好的服务。</div>
              <div class="stamp">
                <span>收货单位（签章）</span>
                <span>承运单位（签章）</span>
              </div>
            </div>
            <div style="text-align: center;font-size: 12px;">
              <span style="margin-right: 20px;">第一联(白)：仓库</span>
              <span>第二联(红)：财务</span>
              <span style="margin-left: 20px;">第三联(蓝)：需求部门</span>
            </div> 
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getWmProductSalseLinePrint } from "../../../../../api/mes/wm/productsalseline";
export default {
  data() {
    return {
      openDetail: false,
      title: "查看打印详情",
      // 表单参数
      form: {},
      loading: false,
      ticketData: [],
      printContent: {
        id: "printMe", // 打印的区域
        preview: false, // 预览工具是否启用
        previewTitle: "打印预览", // 预览页面的标题
        popTitle: "", // 打印页面的页眉
        extraCss:
          "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        previewBeforeOpenCallback() {
          console.log("正在加载预览窗口");
        },
        previewOpenCallback() {
          console.log("已经加载完预览窗口");
        },
        beforeOpenCallback(vue) {
          vue.printLoading = true;
          console.log("打开之前");
        },
        openCallback(vue) {
          vue.printLoading = false;
          console.log("执行了打印");
        },
        closeCallback() {
          console.log("关闭了打印工具");
        },
        clickMounted(vue) {
          console.log("点击了打印按钮");
          vue.printContent.popTitle = vue.tableHead; // 动态设置页眉
        }
      }
    };
  },
  dicts: ["mes_workorder_status"],
  methods: {
    //初始化函数
    init(row) {
      console.log(row, "子组件的row");
      this.ticketData = [];
      this.form = row;
      //调接口需要的id
      this.salseId = row.salseId;
      this.openDetail = true;
      this.getList(row);
    },
    getList(row) {
      this.loading = true;
      getWmProductSalseLinePrint(row.salseId).then(res => {
        if (res.code == 200) {
          this.loading = false;
          this.ticketData = this.tableData(res.data, 5);
          console.log(this.ticketData, "====this.ticketData11=======");
          //   this.print();
        }
      });
    },
    // 取消按钮
    cancel() {
      this.openDetail = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        workorderId: null,
        workorderCode: null,
        workorderName: null,
        orderSource: null,
        sourceCode: null,
        productId: null,
        productCode: null,
        productName: null,
        productSpc: null,
        unitOfMeasure: null,
        quantity: null,
        quantityProduced: null,
        quantityChanged: null,
        quantityScheduled: null,
        clientId: null,
        clientCode: null,
        clientName: null,
        requestDate: null,
        parentId: null,
        status: 0,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        orderType: null,
        fPlanStartDate: null,
        fPlanFinishDate: null
      };
      this.autoGenFlag = false;
      this.resetForm("form");
    },
    // 行合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        const _row = this.spanArr[rowIndex]; // 合并行数
        const _col = this.spanArr[rowIndex] > 0 ? 1 : 0; // 合并的列数
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // // 按照类型合并
    // getSpanArr(data) {
    //   this.spanArr = []; // tip: 后台获取完成数据后，一定要重置spanArr=[],避免出现合并混乱！！！！！
    //   if (data.length > 0) {
    //     for (let i = 0; i < data.length; i++) {
    //       // 当为第一行时
    //       if (i === 0) {
    //         this.spanArr.push(1);
    //         this.pos = 0;
    //       } else {
    //         // 判断当前值是否与上一行的【名称】相等，相等则进行合并
    //         if (data[i].processName === data[i - 1].processName) {
    //           this.spanArr[this.pos] += 1; // 合并单元格：合并的行数 +1
    //           this.spanArr.push(0); // 0代表单元格是不需要显示, 已经被合并的单元格
    //         } else {
    //           this.spanArr.push(1); // 1代表当前这行的数据需要被显示
    //           this.pos = i;
    //         }
    //       }
    //     }
    //   }
    // },
    //指定列求和
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (column.property === "quantitySalse") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        }
      });
      return sums;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container ::v-deep .el-drawer__header {
  padding-top: 10px !important;
  padding-bottom: 5px !important;
  margin-bottom: 10px !important;
}
.headerPrint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .H3 {
    width: 60%;
    text-align: right;
    font-weight: 700;
    font-size: 20px;
  }
  .biaoti {
    width: 40%;
    p {
      margin: 0;
      text-align: center;
      font-size: 16px;
    }
    div {
      text-align: center;
         font-size: 14px;
         margin-left: 10px;
    }
    line-height: 30px;
 
  }
}

.bg-purple {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 13px;
  span:nth-child(1) {
    display: inline-block;
    // width: 100px;
    margin-right: 10px;
    white-space: nowrap;
    line-height: 25px;
    text-indent: 2em;
  }
}
.printDiv {
  border: 1px solid #333;
}
.printDiv ::v-deep .el-table--border .el-table__cell {
  border-color: #333 !important;
}
.printDiv ::v-deep .el-table .cell{
  padding: 0 1px 0 2px !important;
}
.printDiv ::v-deep .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell{
  border-bottom: 1px solid #000;
}
.printDiv ::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
  background-color: #fff;
}
.printDiv ::v-deep .el-table__footer-wrapper tbody td.el-table__cell {
  background-color: #fff !important;
}
.printDiv ::v-deep .el-table .cell {
  padding: 0 1px 0 2px !important;
}
.printDiv ::v-deep .el-table--medium .el-table__cell {
  padding:1px 0 !important;
}

.exporttable {
  border-top: solid 1px #333;
  border-right: none;
  border-left: none;
}
.fontsize {
  font-size: 13px;
}
.remarkDiv{
  border: 1px solid #333;
  border-top: none;
  font-size: 12px;
  .remarkSpan{
    line-height: 30px;
  }
  .stamp{
    display: flex;
    align-items: center;
    span{
      width: 50%;
    }
  }
}
</style>

